<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布闲置</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <style>
        .add-form-container { max-width: 500px; margin: 40px auto; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .add-form-container h2 { text-align: center; margin-bottom: 24px; }
        .add-form-group { margin-bottom: 18px; }
        .add-form-group label { display: block; margin-bottom: 6px; font-weight: bold; }
        .add-form-group input, .add-form-group select, .add-form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .add-form-group textarea { resize: vertical; min-height: 80px; }
        .add-form-btn { width: 100%; padding: 12px; background: #4caf50; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
        .add-form-btn:hover { background: #388e3c; }
    </style>
</head>
<body>
    <div class="add-form-container">
        <h2>{{if .edit}}编辑闲置物品{{else}}发布闲置物品{{end}}</h2>
        <form method="post" action="{{if .edit}}/edit/item/{{.item.ID}}{{else}}/add/item{{end}}" enctype="multipart/form-data">
            <div class="add-form-group">
                <label for="title">标题</label>
                <input type="text" id="title" name="title" required placeholder="如：iPhone 13 二手手机" value="{{if .edit}}{{.item.Title}}{{end}}">
            </div>
            <div class="add-form-group">
                <label for="price">价格（元）</label>
                <input type="number" id="price" name="price" required min="1" step="0.01" placeholder="请输入价格" value="{{if .edit}}{{.item.Price}}{{end}}">
            </div>
            <div class="add-form-group">
                <label for="category">分类</label>
                <select id="category" name="category" required>
                    {{range .categories}}
                    <option value="{{.ID}}" {{if and $.edit (eq $.item.Category .ID)}}selected{{end}}>{{.Category}}</option>
                    {{end}}
                </select>
            </div>
            <div class="add-form-group">
                <label for="detail">详情描述</label>
                <textarea id="detail" name="detail" required placeholder="请输入物品详情，如成色、配件、使用情况等">{{if .edit}}{{.item.Detail}}{{end}}</textarea>
            </div>
            <div class="add-form-group">
                <label for="image">商品图片</label>
                <input type="file" id="image" name="image" accept="image/*">
                {{if .edit}}
                <div style="margin-top:10px;">
                    <img src="{{if .item.Image}}{{.item.Image}}{{else}}/static/img/default.jpg{{end}}" alt="当前图片" style="max-width:120px;max-height:120px;display:block;">
                    <label><input type="checkbox" name="delete_image" value="1"> 删除当前图片</label>
                </div>
                {{end}}
            </div>
            <button type="submit" class="add-form-btn">{{if .edit}}保存修改{{else}}发布{{end}}</button>
        </form>
        <script>
        // 拦截表单提交后的响应，若返回Success则跳转主页面
        document.querySelector('form').onsubmit = async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            // 如果有删除图片选项被勾选，加入formData
            if (this.delete_image && this.delete_image.checked) {
                formData.set('delete_image', '1');
            }
            const res = await fetch(this.action, { method: 'POST', body: formData });
            let data;
            try {
                data = await res.json();
            } catch {
                alert('操作失败：' + await res.text());
                return;
            }
            if (data.success) {
                if (window.location.pathname.startsWith('/edit/item/')) {
                    alert('修改成功！');
                    window.location.href = '/my/items';
                } else {
                    alert('发布成功！');
                    window.location.href = '/';
                }
            } else if (data.error) {
                alert('操作失败：' + data.error);
            } else {
                alert('操作失败，未知错误');
            }
        };
        </script>
    </div>
</body>
</html> 